<template>
  <div class="container">
    <div class="section">
      <h2 class="title">
        添加成员
      </h2>
      <ul class="info">

        <li class="list-item">
          <div class="tip">
            <span class="must">*</span> 姓名
          </div>
          <div class="detail">
            <el-input v-model="user_name"
                      placeholder="请输入内容"></el-input>
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            <span class="must">*</span> 邮箱
          </div>
          <div class="detail">
            <el-input v-model="user_email"
                      placeholder="请输入内容"></el-input>
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            <span class="must">*</span> 角色
          </div>
          <div class="detail">
            <el-select v-model="role"
                       placeholder="请选择">
              <el-option v-for="item in role_list"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            <span class="must">*</span> 手机号
          </div>
          <div class="detail">
            <el-input v-model="user_tel"
                      placeholder="请输入内容"></el-input>
          </div>
        </li>

        <li class="list-item">
          <div class="tip">
            <span class="must">*</span> 是否开启
          </div>
          <div class="detail">
            <el-switch v-model="status"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </div>
        </li>

      </ul>
    </div>

    <div class="sub-btn">
      <el-button type="primary"
                 @click="save_project()">保存</el-button>
    </div>
  </div>
</template>
<script>
import { Promise, promised } from 'q';
import { listAdminRoleDTO } from '../../../api/adminManage'
import { addUser } from '../../../api/user'
export default {
  data () {
    return {
      input: '',
      status: true,
      role_list: [],
      role: "",
      user_name: "",
      user_email: "",
      user_tel: ""
    }
  },
  methods: {
    // 保存
    save_project () {
      if (this.user_name === '') {
        this.$message.error('请输入姓名');
      } else if (this.user_email === '') {
        this.$message.error('请输入邮箱');
      } else if (this.role === '') {
        this.$message.error('请选择角色');
      } else if (this.user_tel === '') {
        this.$message.error('请输入手机号');
      } else {
        addUser( {
          realName: this.user_name,
          phone: this.user_tel,
          email: this.user_email,
          roleIds: [this.role],
          status: this.status
        }).then((result) => {
          let res = result.data
          if (res.code === 0) {
            this.$message({
              message: '成员添加成功',
              type: 'success'
            });
            this.$router.go(-1)
          } else {
            this.$message.error(res.msg);
          }
        }).catch((err) => {
          this.$message.error(err);
        });
      }
    },
    get_rolelist () {
      listAdminRoleDTO({
        "pageNum": 1,
        "pageSize": 1000,
      }).then((result) => {
        let res = result.data
        if (res.code === 0) {
          if (res.data.roleResponseDTOS) {
            let arr = []
            res.data.roleResponseDTOS.forEach(val => {
              arr.push({
                value: val.id,
                label: val.roleName
              })
            });
            this.role_list = arr
          }
        } else {
          this.$message.error(res.msg);
        }
      }).catch((err) => {
        this.$message.error(err);
      });
    }
  },
  created () {
    this.get_rolelist()

  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  .section {
    .title {
      width: 120px;
      height: 30px;
      background-color: #409eff;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      color: #fff;
      box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .info {
      margin-left: 40px;
      .list-item {
        margin-bottom: 20px;
        .tip {
          color: #409eff;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          width: 130px;
          text-align: right;
          .msk {
            font-size: 10px;
            color: #666;
            margin-right: 20px;
            margin-top: 10px;
          }
          .must {
            display: inline-block;
            vertical-align: middle;
            color: #ff3040;
          }
        }
        .detail {
          color: #666;
          min-width: 350px;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;

          .el-select {
            display: block !important;
          }

          &.project_detail {
            vertical-align: top;
          }
        }
      }
    }
  }
  .sub-btn {
    .el-button {
      margin: 20px auto;
      display: block;
    }
  }
}
</style>

